<!-- 网盘中的分类 -->
<template>
  <div class="netdisk-classify-container">
    <div class="classify-main">
      <div class="classify-header" v-show="$parent.currentTap==='all'||$parent.currentTap==='share'">
        <span v-for="(item,index) in paths" :key="index">
          <span v-if="index!==0" style="padding: 0 5px;">></span>
          <span @click="$parent.changeDir(item,index)" :class="index+1===paths.length?'classify-title':'my-netdisk'">{{item.name}}</span>
        </span>
        <!--<span class="classify-title" style="cursor:pointer">{{title}}</span>-->
          <!--<i class="iconfont" style="font-size:12px">&#xe672;</i>-->
        <!--<span class="classify-title" style="cursor:pointer">{{title}}</span>-->
      </div>
      
      <div style="border-top: 1px solid #e9e9e9;">
        <!--<img :src="imgsrc">-->
        <!--<el-upload-->
            <!--class="avatar-uploader"-->
            <!--action="/boot/sys/common/upload"-->
            <!--:show-file-list="false"-->
            <!--:file-list="fileList"-->
            <!--:on-success="handleAvatarSuccess"-->
            <!--:before-upload="beforeAvatarUpload">-->
            <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
            <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
          <!--</el-upload>-->
        <div v-show="true" v-for="(item, index) in fileList" :key="item.id" :class="item.isActive?'box isActive':'box'">
          <div  @click="$parent.open(item)" class="dir-large" :class="item.fileType" draggable="true" @dragstart="drag(item.id, index)" @dragover.prevent @drop="drop(item.id,index)">
            <img v-if="item.fileType === 'img'" style="max-width: 100%;" :src="item.filePath" alt="">
          </div>
          <div class="file-name-box"><span class="file-name">{{item.fileName}}</span>
            <el-popover
              v-if="item.shareList.length"
              class="share"
              placement="right"
              trigger="hover">
              <el-table :data="item.shareList">
                <el-table-column property="shareUsername" label="姓名"></el-table-column>
                <el-table-column property="shareTime" label="剩余时间">
                  <template slot-scope="scope">
                    <span>{{scope.row.shareTime==='0'?'已失效':scope.row.shareTime}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <span slot="reference" class="icon iconfont icon-fenxiang" style="color: #36a5ff;"></span>
            </el-popover>
            <span class="share" v-else><span class="icon iconfont icon-fenxiang"></span></span>
            </div>
          <div class="file-time">{{item.createTime.slice(0,10)}} <span v-if="item.fileType!=='folder'">{{item.fileSize|transFileSize}}</span></div>
          <!--<div class="file-time" v-if="item.shareList[0]">{{item.shareList[0].shareTime}} {{item.shareList[0].shareUsername}}</div>-->
          <span class="EOGexf" @click="active(index)">
            <span class="icon exdhPmdN"></span>
              <span class="icon checkgridsmall">
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "netdiskClassify",
  props: ['fileList','paths', 'currentTap'],
  components: {},
  data() {
    return {
      imgsrc:'',
      dialogImageUrl:'',
      // fileList:[
      //   {id: 1,type: 'folder',isActive: false, name: '文件夹', url: ''},
      //   {id: 2,type: 'img',isActive: false, name: '图片.png', url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4249806454,3340336260&fm=26&gp=0.jpg'},
      //   {id: 3,type: 'text',isActive: false, name: '文本.txt', url: ''},
      //   {id: 4,type: 'video',isActive: false, name: '视频.mp4', url: ''},
      //   {id: 5,type: 'other',isActive: false, name: '文件', url: ''},
      // ],
      imageUrl: '',
      gridData: [{
        date: '12:22:11',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '12:22:15',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dragId: 0,
      dragIndex: 0,
    };
  },
  mounted(){
    // this.imgsrc='http://localhost:8081' + window._CONFIG['imgDomainURL']+"/"+file.response.message
    // this.fileList.push({name:'111',url:'http://localhost:8081' + window._CONFIG['imgDomainURL']+"/"+file.response.message});
    // alert(window._CONFIG['imgDomainURL']+"/"+'user/20191031/12345_1572488455356.jpg') 
  },
  beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      drop (id, index) {
        console.log(index)
        if (this.fileList[index].fileType === 'folder') {
          this.axios.post('/dailyOffice/netDisk/drag',{id:this.dragId,parentId:id})
          this.$parent.fileList.splice(this.dragIndex, 1)
        }
      },
      drag (id, index) {
        this.dragId = id
        this.dragIndex = index
      },
      active (index) {
        const fileList = this.fileList
        fileList[index].isActive = !fileList[index].isActive
      },
      // 上传成功
      handleAvatarSuccess(res, file) {
        this.imgsrc = window._CONFIG['imgDomainURL']+"/"+file.response.message;
        console.log(window._CONFIG['imgDomainURL']+"/"+file.response.message)
        // 文件的类型jpg或者是doc等等
        console.log(file.name.split('.')[1])
      },
      beforeAvatarUpload(file) {
        console.log('开始验证')
      }
    }
};
</script>

<style lang="scss" scoped>
  .el-table{
    color: #666;
  }
  .share{
    /*font-size: 16px;*/
    margin-left: 8px;
    margin-top: 2px;
    cursor: pointer;
  }
  .file-time{
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
  }
  .img{
    display: flex;
    align-items: center;
  }
  .file-name-box{
    margin: 6px 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .file-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    font-size: 14px;
    color: #333;
  }
  .file-name:hover{
    color: #09AAFF;
  }
  .checkgridsmall {
    font-size: 19px;
    color: #09AAFF;
    position: absolute;
    left: 1px;
  }
  .exdhPmdN {
    font-size: 19px;
    color: #fff;
    position: absolute;
    left: 1px;
  }
  @font-face{
    font-family:'yunfont';
    src: url('../../../../assets/fonts/yunfont.ttf');
  }
  .icon{
    font-family: 'yunfont';
    line-height: 1;
  }
  .EOGexf{
    position: absolute;
    top: 5px;
    left: 5px;
    height: 21px;
    width: 21px;
    display: none;
    cursor: pointer;
    opacity: .4;
  }
  .dir-large {
    margin: 9px auto 0;
    width: 66px;
    /*width: 84px;*/
    height: 84px;
    overflow: hidden;
    cursor: pointer;
  }
  .folder{
    background: url('../../../../assets/networkDisk/folder.png') center no-repeat;
  }
  .text{
    background: url('../../../../assets/networkDisk/text.png') center no-repeat;
  }
  .video{
    background: url('../../../../assets/networkDisk/video.png') center no-repeat;
  }
  .other{
    background: url('../../../../assets/networkDisk/other.png') center no-repeat;
  }
  .box{
    display: inline-block;
    width: 120px;
    /*height: 127px;*/
    margin: 12px 0 0 12px;
    text-align: center;
    position: relative;
    border-radius: 5px;
    vertical-align: top;
    border: 1px solid #fff;
  }
  .isActive{
    background-color: #f1f5fa;
    border-color: #90d8ff;
  }
  .isActive .EOGexf{
    display: block;
    opacity: 1;
  }
  .box:hover{
    background-color: #f1f5fa;
  }
  .box:hover .EOGexf{
    display: block;
  }
  .avatar-uploader{
    display: inline-block;
    margin: 10px;
  }
.netdisk-classify-container {
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  display: flex;
  // flex-direction: column;
  .classify-main {
    flex: 4.5;
    background: #fff;
    .classify-header {
      width: 100%;
      background: #fff;
      padding: 8px 12px;
      .classify-title {
        font-size: 12px;
        color: #666;
      }
      .classify-search {
        outline: none;
        width: 164px;
        height: 22px;
        padding-left: 6px;
        border: 0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        background-color: #fff;
      }
    }
  }
  .classify-group {
    flex: 1;
    background: #ddd;
  }
}
  .my-netdisk{
    font-size:12px;color: #999;cursor:pointer
  }
.my-netdisk:hover{
  color: rgb(6,168,255);
  text-decoration: underline;
}
/*.classify-title:hover{*/
   /*color: rgb(6,168,255);*/
  /*text-decoration: underline;*/
/*}*/

 .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
  .avatar {
    width: 64px;
    height: 64px;
    display: block;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
  } 
  .avatar-uploader-icon:hover{
       border-color: #409EFF;
  }
</style>
